<template>
  <div style="width:100%">
    <el-row :gutter="20">
      <el-col :sm="8" :md="6" :lg="5" :xl="3" :style="{height:cardHeight}">
        <el-card style="height:100%" class="card">
          <div slot="header">
            <span>数据分类</span>
          </div>
          <el-tree
            :data="menus"
            :props="menusProps"
            accordion
            @node-click="handleNodeClick"
            node-key="code"
            :default-expanded-keys="defaultExpandedKeys"
            :style="{'overflow':'auto','height':treeHeight}"
          />
        </el-card>
      </el-col>
      <el-col :sm="16" :md="18" :lg="19" :xl="21" :style="{height:cardHeight}">
        <el-card style="height:100%" class="card">
          <div v-if="this.selectMenu1.name" slot="header">
            <span>{{ this.selectMenu1.name }}</span>
            <span v-if="this.selectMenu2.name">/ {{ this.selectMenu2.name }}</span>
          </div>
          <el-row>
            <el-form :inline="true" :model="searchModel">
              <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                  <el-input
                    placeholder="请填写井名"
                    v-model="searchModel.wellName"
                    clearable
                    maxlength="20"
                  />
                </el-form-item>
              </el-col>
              <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                  <el-select v-model="searchModel.wellType" clearable placeholder="请选择井型">
                    <el-option label="直井" value="直井"></el-option>
                    <el-option label="定向井" value="定向井"></el-option>
                    <el-option label="水平井" value="水平井"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                  <el-select v-model="searchModel.wellCategory" clearable placeholder="请选择井别">
                    <el-option label="探井" value="探井"></el-option>
                    <el-option label="生产井" value="生产井"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :sm="16" :md="16" :lg="8" :xl="5">
                <el-form-item>
                  <el-date-picker
                    v-model="datapicker"
                    type="daterange"
                    align="right"
                    clearable
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    style="width:100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :sm="8" :md="8" :lg="4" :xl="3">
                <el-form-item>
                  <el-button type="primary" @click="submitSearchModel">查询</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <el-row style="width:100%">
            <el-table
              :data="tableData"
              border
              style="width: 100%;font-size:10px"
              :max-height="tableHeight"
              :header-row-style="rowStyle"
              :header-cell-style="cellStyle"
              :row-style="rowStyle"
              :cell-style="cellStyle"
            >
              <el-table-column
                v-if="tableHead[0]"
                :label="tableHead[0].label"
                :prop="tableHead[0].property"
                width="100"
                align="center"
                fixed="left"
              />
              <el-table-column
                v-for="(item,index) in tableHead.slice(1)"
                :label="item.label"
                :property="item.property"
                :key="index"
                width="80"
                show-overflow-tooltip
                align="center"
              />
            </el-table>
          </el-row>
          <el-row style="width:100%">
            <div class="pagination-base">
              <el-pagination
                @current-change="handlePageChange"
                :current-page="1"
                :page-size="pageSize"
                :total="totalData"
                background
                layout="total,prev, pager, next,jumper"
              ></el-pagination>
            </div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  GetDataClassificationMenus,
  GetTableHead,
  GetTableData
} from '../../api/module/data_classification'

export default {
  data() {
    return {
      menus: [],
      menusProps: {
        children: 'children',
        label: 'name'
      },
      selectMenu1: {},
      selectMenu2: {
        menuName: ''
      },
      searchModel: {
        wellName: '',
        wellType: '',
        wellCategory: '',
        drillDate: ''
      },
      datapicker: [],
      defaultExpandedKeys: [],
      tableData: [],
      tableHead: [],
      pageIdx: 1,
      pageSize: 10,
      totalData: 0,
      cardHeight: '',
      tableHeight: 0,
      treeHeight: '',
      rowStyle: { height: '30px' },
      cellStyle: {
        padding: 0,
        // 'border-bottom': '1px solid #111111',
        // 'border-right': '1px solid #111111'
      },
      navigationWidth: 0,
      isShowSliderGetters: true,
    }
  },
  created() {
    this.getWidth()
    window.onresize = () => {
      this.getWidth()
    }
  },
  mounted() {
    this.getDataClassificationMenus()
  },
  methods: {
    // 获取宽度
    getWidth() {
      let height = window.innerHeight
      let width = window.innerWidth
      this.cardHeight = height + 'px'
      this.treeHeight = height  + 'px'
      if (width >= 1200) {
        this.tableHeight = height - 130
      } else {
        this.tableHeight = height - 290
      }
      this.rowStyle.height = this.tableHeight / 12 + 'px'
      // if (width >= 1200) {
      //   this.tableHeight = height - 260
      //   if (width < 1600) {
      //     this.pageSize = 10
      //   } else if (width < 1920) {
      //     this.pageSize = 15
      //   } else {
      //     this.pageSize = 20
      //   }
      // } else {
      //   this.tableHeight = height - 310
      //   if (width >= 992) {
      //     this.pageSize = 5
      //   } else if (width >= 768) {
      //     this.pageSize = 3
      //   }
      // }
    },
    // 获取菜单
    getDataClassificationMenus() {
      GetDataClassificationMenus()
        .then(res => {
          this.menus = res.data.data
          this.selectMenu1 = { ...this.menus[0] }
          this.defaultExpandedKeys.push(this.selectMenu1.code)
          this.selectMenu2 = { ...this.menus[0].children[0] }
          this.getTableHead()
          this.getTableData()
        })
        .catch(err => {
          this.$message.error('查询出错，请刷新！')
        })
    },
    // 获取表头
    getTableHead() {
      GetTableHead(this.selectMenu2.menuName)
        .then(res => {
          this.tableHead = res.data.data
        })
        .catch(err => {
          this.$message.error('查询出错，请刷新！')
        })
    },
    // 获取表格数据
    getTableData() {
      GetTableData(
        this.selectMenu2.menuName,
        this.pageIdx,
        this.pageSize,
        this.searchModel
      )
        .then(res => {
          if (res.data.data.data[0].data) {
            this.tableData = res.data.data.data[0].data
          } else {
            this.tableData = []
          }
          this.totalData = res.data.data.data[0].total
        })
        .catch(err => {
          this.$message.error('查询出错，请刷新！')
        })
    },
    // 点击菜单节点
    handleNodeClick(data) {
      if (!data.children) {
        this.selectMenu2 = { ...data }
        this.getTableHead()
        this.getTableData()
      } else {
        this.selectMenu1 = { ...data }
        this.defaultExpandedKeys[0] = this.selectMenu1.code
        this.selectMenu2 = {}
        this.tableHead = []
        this.tableData = []
        this.totalData = 0
      }
    },
    // 点击查询
    submitSearchModel() {
      this.pageIdx = 1
      this.searchModel.drillDate = this.dealDate(this.datapicker)
      this.getTableData()
    },
    // 换页
    handlePageChange(page) {
      this.pageIdx = page
      this.getTableData()
    },
    // 处理时间选择器数据
    dealDate(datePicker) {
      if (!datePicker || datePicker.length < 2) {
        return ''
      }
      return datePicker[0] + '&' + datePicker[1]
    }
  }
}
</script>
<style scoped>
.card >>> .el-card__body {
  padding: 5px;
}
.card >>> .el-card__header {
  font-size: 12px;
  padding: 5px 10px ;
  /* padding: 5px 10px !important; */
  height: 40px;
  line-height: 30px;
  background-color:#EEF0F6
}
.el-form-item {
  height: 40px;
  margin: 5px 10px 5px 0;
  width: 90%;
}
</style>
